<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高的继承</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px "Microsoft YaHei"; */
            font: 12px/1.5 "Microsoft YaHei";
        }

        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小font-size的1.5倍  所以当前div的行高就是21 */
            font-size: 14px;
        }

        p {
            /* 1.5 * 16 = 24 当前的行高 */
            font-size: 16px;
        }

        /* li 没有手动指定文字大小  则会继承父亲的 文字大小 body 12px 所以 li 的文字大小是为 12px */
        /* 当前 li 的行高就是 12*1.5=18 */
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

</html>